<template>
    <div>
        <div class="ellipsis box" ref="divRef">
            <span class="content" ref="contentRef"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit </span>
        </div>
    </div>
</template>

<script lang="ts">
import { Tooltip } from 'ant-design-vue';
import { defineComponent, ref, unref, onMounted, createVNode, render } from 'vue';
export default defineComponent({
    setup() {
        const divRef = ref<any>();
        const contentRef = ref<any>();
        const getPadding = (el: HTMLElement) => {
            const style = window.getComputedStyle(el, null);
            const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
            const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
            const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
            const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
            return {
                left: paddingLeft,
                right: paddingRight,
                top: paddingTop,
                bottom: paddingBottom
            };
        };
        const checkEllipsis = (box: any) => {
            const { left, right } = getPadding(box);
            const horizontalPadding = left + right;
            console.log('horizontalPadding', contentRef.value.offsetWidth);
            if (box.clientWidth <= contentRef.value.offsetWidth + horizontalPadding) {
                // result.textContent = '存在省略号';
                console.log(box.clientWidth, contentRef.value.offsetWidth, '存在省略号');
            } else {
                console.log(box.clientWidth, contentRef.value.offsetWidth, '容器宽度足够，没有省略号了');
            }
        };
        onMounted(() => {
            checkEllipsis(unref(divRef));
            const vDom = createVNode(Tooltip, { title: '暂无数据' });
            render(vDom, divRef.value);
        });
        return {
            divRef,
            contentRef
        };
    }
});
</script>

<style scoped lang="less">
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.box {
    border: 1px solid gray;
    padding: 10px;
}
</style>